<script setup>
import {onBeforeUnmount, onMounted, ref} from 'vue';
import {userTokenStore} from "@/store/userTokenStore.js";
import {closeDriver, renderGraph} from '@/api/graph.js'

import * as d3 from 'd3';
import {ElMessage, ElNotification} from "element-plus";
const store = userTokenStore();
const imageUrl = ref('');
const uploadPercent = ref(0);
const uploading = ref(false);
const uploadedFile = ref(null);

const beforeUpload = (file) => {
  const isPDF = file.type === 'application/pdf';
  if (!isPDF) {
    ElMessage.error('上传的文件必须是 PDF 格式');
  }
  return isPDF;
};

const handleProgress = (event, file, fileList) => {
  uploading.value = true;
  uploadPercent.value = Math.floor(event.percent);
  uploadedFile.value = file;
};

const handleSuccess = (response, file, fileList) => {
  uploading.value = false;
  uploadPercent.value = 100;
  uploadedFile.value = file;
  ElNotification.success({
    title: '上传成功',
    message: 'PDF 文件上传成功！',
    duration: 2000
  });
  if (response.imageUrl) {
    imageUrl.value = response.imageUrl;
  }
};

const handleError = (error, file, fileList) => {
  uploading.value = false;
  uploadPercent.value = 0;
  ElNotification.error({
    title: '上传失败',
    message: 'PDF 文件上传失败，请重试',
    duration: 2000
  });
};
ElMessage.info("如地图未出现,请点击刷新!");
onMounted(() => {
  const container = document.getElementById('graph-container');
  if (container) {
    setTimeout(() => {
      renderGraph();
    }, 1000);
  }
});

// 添加组件卸载时的清理逻辑
  onBeforeUnmount(() => {
    closeDriver(); // 确保组件卸载时关闭驱动
  });
</script>
<template>
  <div class="container">
    <!-- 展示图像的区域 -->
    <el-card class="knowledge-map-card">
      <template #header>
        <div class="card-header">
          <span>知识地图</span>
        </div>
      </template>
      <div class="display-area"  id = "graph-container">
        展示区域
      </div>
      <template #footer>
        <div class="card-footer">
          <span>请在下方上传你的pdf</span>
        </div>
      </template>
    </el-card>
    <!-- PDF 上传区域 -->
    <el-upload
        class="upload-demo"
        drag
        action="/api/graph/show"
        :on-success="handleSuccess"
        :on-error="handleError"
        :before-upload="beforeUpload"
        :on-progress="handleProgress"
        accept=".pdf"
        :headers="{ Authorization: store.token }"
        :show-file-list="false"
    >
      <template #trigger>
        <div class="custom-upload-btn">
          <i class="el-icon-upload"></i>
          <span>点击或拖拽上传 PDF</span>
        </div>
      </template>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只允许上传 PDF 文件</div>
      <div v-if="uploading" class="upload-progress">
        <el-progress :percentage="uploadPercent" :status="uploadPercent === 100 ? 'success' : 'active'"/>
      </div>
      <div v-if="uploadedFile" class="file-info">
        <el-icon><i class="el-icon-document"></i></el-icon>
        <span>{{ uploadedFile.name }}</span>
      </div>
    </el-upload>
  </div>
</template>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px;
}

.knowledge-map-card {
  height: 80vh;    /* 保留显式高度 */
  flex: none;      /* 禁用弹性布局分配高度 */
  margin-bottom: 20px;
}


.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.display-area {
  min-height: 900px; /* 设置合适的最小高度值 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f4f6f9;
}
.upload-demo {
  width: 350px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 24px 16px 16px 16px;
}
.custom-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #409EFF;
  cursor: pointer;
  margin-bottom: 8px;
}
.custom-upload-btn i {
  font-size: 32px;
  margin-bottom: 4px;
}
.upload-progress {
  margin-top: 10px;
}
.file-info {
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: #606266;
  font-size: 14px;
}
.file-info i {
  margin-right: 6px;
}
.card-footer{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>